<template>
  <div class="agent-role-manager">
    <div class="action-bar">
      <div class="search-wrapper">
        <div class="search-input">
          <i class="search-icon el-icon-search"></i>
          <input 
            type="text" 
            v-model="keyword" 
            placeholder="搜索智能体角色名称或描述" 
            @keyup.enter="handleSearch"
          />
          <button class="search-btn" @click="handleSearch">搜索</button>
        </div>
      </div>
      
      <div class="action-buttons">
        <button class="btn-primary" @click="handleCreateRole">
          <i class="btn-icon el-icon-plus"></i>
          <span>创建智能体角色</span>
        </button>
      </div>
    </div>
    
    <div class="table-card">
      <el-table
        v-loading="loading"
        :data="roleList"
        style="width: 100%"
        :header-cell-style="{
          background: '#fafbfc',
          color: '#374151',
          fontWeight: '600',
          borderBottom: '1px solid #e5e7eb',
          fontSize: '14px'
        }"
        :cell-style="{
          borderBottom: '1px solid #f3f4f6',
          padding: '16px 12px'
        }"
        :row-style="{
          transition: 'all 0.2s ease'
        }"
      >
        <el-table-column prop="name" label="角色名称" width="150">
          <template #default="{ row }">
            <div class="role-name">
              <div class="role-icon-wrapper">
                <i v-if="row.icon" :class="row.icon" class="role-icon"></i>
                <i v-else class="el-icon-user role-icon default-icon"></i>
              </div>
              <span class="role-name-text">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="describe" label="描述" min-width="200">
          <template #default="{ row }">
            <div class="role-describe" :title="row.describe">{{ row.describe }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <span class="type-badge" :class="getTypeClass(row.type)">
              {{ getTypeLabel(row.type) }}
            </span>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
              active-color="#10b981"
              inactive-color="#d1d5db"
            />
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template #default="{ row }">
            <div class="time-info">
              <div class="time-text">{{ formatDate(row.createdAt) }}</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="updatedAt" label="更新时间" width="180">
          <template #default="{ row }">
            <div class="time-info">
              <div class="time-text">{{ formatDate(row.updatedAt) }}</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="table-actions">
              <el-tooltip content="编辑" placement="top">
                <button class="action-btn edit-btn" @click="handleEdit(row)">
                  <i class="el-icon-edit-outline"></i>
                  <span class="btn-text">编辑</span>
                </button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <button class="action-btn delete-btn" @click="handleDelete(row)">
                  <i class="el-icon-delete"></i>
                  <span class="btn-text">删除</span>
                </button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="table-footer">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    
    <!-- 创建/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑智能体角色' : '创建智能体角色'"
      width="700px"
      :close-on-click-modal="false"
      class="role-dialog"
      :before-close="handleDialogClose"
      :show-close="false"
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-title">
            <span class="title-icon"><i class="el-icon-user"></i></span>
            <div class="title-content">
              <h3>{{ isEdit ? '编辑智能体角色' : '创建智能体角色' }}</h3>
              <p>{{ isEdit ? '修改智能体角色信息' : '添加新的智能体角色' }}</p>
            </div>
          </div>
          <button class="custom-close-btn" @click="handleDialogClose">
            <i class="el-icon-close"></i>
          </button>
        </div>
      </template>
      
      <div class="dialog-body">
        <!-- 表单错误提示 -->
        <div v-if="formErrors.length > 0" class="form-errors">
          <div class="error-icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="error-list">
            <p v-for="(error, index) in formErrors" :key="index" class="error-item">{{ error }}</p>
          </div>
        </div>

        <el-form 
          ref="formRef"
          :model="roleForm" 
          :rules="rules"
          label-width="90px"
          class="role-form"
          label-position="top"
        >
          <div class="form-row">
            <el-form-item label="角色名称" prop="name" class="form-item">
              <el-input 
                v-model="roleForm.name" 
                placeholder="请输入角色名称"
                prefix-icon="el-icon-user"
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="图标" prop="icon" class="form-item">
              <el-input 
                v-model="roleForm.icon" 
                placeholder="请输入图标类名 (如: el-icon-star)"
                prefix-icon="el-icon-picture"
                size="large"
              />
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="描述" prop="describe" class="form-item full-width">
              <el-input 
                v-model="roleForm.describe" 
                placeholder="请输入角色描述"
                prefix-icon="el-icon-document"
                size="large"
              />
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="类型" prop="type" class="form-item">
              <el-select v-model="roleForm.type" placeholder="请选择类型" class="full-width" size="large">
                <el-option :value="1" label="学术顾问" />
                <el-option :value="2" label="代码助手" />
                <el-option :value="3" label="创意写作" />
                <el-option :value="4" label="自定义" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="状态" prop="status" class="form-item">
              <el-select v-model="roleForm.status" placeholder="请选择状态" class="full-width" size="large">
                <el-option :value="1" label="启用" />
                <el-option :value="0" label="禁用" />
              </el-select>
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="提示词" prop="cueWord" class="form-item full-width">
              <el-input 
                v-model="roleForm.cueWord" 
                type="textarea"
                :rows="8"
                placeholder="请输入提示词，支持多行文本。可以拖拽右下角调整大小。"
                resize="both"
                maxlength="5000"
                show-word-limit
                class="cue-word-textarea"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button size="large" @click="handleDialogClose">取消</el-button>
          <el-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
            {{ isEdit ? '保存' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { 
  getAgentRoleList, 
  createAgentRole, 
  updateAgentRole, 
  deleteAgentRole,
  type AgentRoleInfo,
  type AgentRolePageRequest,
  type AgentRoleCreateDTO,
  type AgentRoleUpdateDTO
} from '../api/agentRole'

// 列表相关
const roleList = ref<AgentRoleInfo[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const keyword = ref('')

// 表单相关
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const submitting = ref(false)
const formErrors = ref<string[]>([])
const isEdit = ref(false)
const editId = ref<number | null>(null)

// 表单数据
const roleForm = reactive({
  name: '',
  icon: '',
  describe: '',
  cueWord: '',
  type: 1,
  status: 1
})

// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  describe: [
    { required: true, message: '请输入角色描述', trigger: 'blur' },
    { min: 5, max: 200, message: '描述长度在 5 到 200 个字符', trigger: 'blur' }
  ],
  cueWord: [
    { required: true, message: '请输入提示词', trigger: 'blur' },
    { min: 10, max: 5000, message: '提示词长度在 10 到 5000 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})

// 获取角色列表
const fetchRoleList = async () => {
  loading.value = true
  try {
    const params: AgentRolePageRequest = {
      page: currentPage.value,
      pageSize: pageSize.value,
      keyword: keyword.value
    }
    const res = await getAgentRoleList(params)
    roleList.value = res.data.items
    total.value = res.data.total
  } catch (error) {
    // 错误已被拦截器处理
  } finally {
    loading.value = false
  }
}

// 搜索并刷新列表
const handleSearch = () => {
  currentPage.value = 1
  fetchRoleList()
}

// 分页处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchRoleList()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchRoleList()
}

// 创建角色
const handleCreateRole = () => {
  isEdit.value = false
  editId.value = null
  resetForm()
  dialogVisible.value = true
}

// 编辑角色
const handleEdit = (row: AgentRoleInfo) => {
  isEdit.value = true
  editId.value = row.id
  roleForm.name = row.name
  roleForm.icon = row.icon
  roleForm.describe = row.describe
  roleForm.cueWord = row.cueWord
  roleForm.type = row.type
  roleForm.status = row.status
  dialogVisible.value = true
}

// 状态切换
const handleStatusChange = async (row: AgentRoleInfo) => {
  const originalStatus = row.status === 1 ? 0 : 1
  try {
    const updateData: AgentRoleUpdateDTO = {
      id: row.id,
      name: row.name,
      icon: row.icon,
      describe: row.describe,
      cueWord: row.cueWord,
      type: row.type,
      status: row.status
    }
    await updateAgentRole(updateData)
    ElMessage.success('状态更新成功')
  } catch (error) {
    row.status = originalStatus
    ElMessage.error('更新状态失败')
  }
}

// 删除角色
const handleDelete = (row: AgentRoleInfo) => {
  ElMessageBox.confirm(
    `确定要删除角色 ${row.name} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await deleteAgentRole(row.id)
      ElMessage.success('删除成功')
      fetchRoleList()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  })
}

// 关闭对话框
const handleDialogClose = () => {
  dialogVisible.value = false
  resetForm()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    formErrors.value = []
    submitting.value = true
    
    if (isEdit.value && editId.value) {
      const updateData: AgentRoleUpdateDTO = {
        id: editId.value,
        ...roleForm
      }
      await updateAgentRole(updateData)
      ElMessage.success('更新成功')
    } else {
      const createData: AgentRoleCreateDTO = { ...roleForm }
      await createAgentRole(createData)
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
    fetchRoleList()
  } catch (error: any) {
    if (error.fields) {
      // 表单验证错误
      return
    }
    
    // API错误
    if (error.response?.data?.msg) {
      formErrors.value = [error.response.data.msg]
    } else {
      formErrors.value = [isEdit.value ? '更新失败' : '创建失败']
    }
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  roleForm.name = ''
  roleForm.icon = ''
  roleForm.describe = ''
  roleForm.cueWord = ''
  roleForm.type = 1
  roleForm.status = 1
  formErrors.value = []
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 工具函数
const getTypeLabel = (type: number) => {
  const typeMap: { [key: number]: string } = {
    1: '学术顾问',
    2: '代码助手', 
    3: '创意写作',
    4: '自定义'
  }
  return typeMap[type] || '未知'
}

const getTypeClass = (type: number) => {
  const classMap: { [key: number]: string } = {
    1: 'type-academic',
    2: 'type-code',
    3: 'type-creative', 
    4: 'type-custom'
  }
  return classMap[type] || 'type-unknown'
}

const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 初始化
onMounted(() => {
  fetchRoleList()
})
</script>

<style scoped lang="scss">
.agent-role-manager {
  width: 100%;
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}

/* 操作栏样式 - 更柔和的设计 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  
  .search-wrapper {
    flex: 1;
    max-width: 500px;
    
    .search-input {
      position: relative;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border-radius: 12px;
      overflow: hidden;
      
      .search-icon {
        position: absolute;
        left: 16px;
        color: #6b7280;
        z-index: 1;
      }
      
      input {
        flex: 1;
        height: 48px;
        padding: 0 16px 0 44px;
        border: 2px solid #e5e7eb;
        border-radius: 12px 0 0 12px;
        font-size: 14px;
        outline: none;
        transition: all 0.3s ease;
        background: white;
        
        &:focus {
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        &::placeholder {
          color: #9ca3af;
        }
      }
      
      .search-btn {
        height: 48px;
        padding: 0 24px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border: none;
        border-radius: 0 12px 12px 0;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          background: linear-gradient(135deg, #5856eb 0%, #7c3aed 100%);
          transform: translateY(-1px);
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 12px;
    
    .btn-primary {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 48px;
      padding: 0 24px;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: white;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
      
      &:hover {
        background: linear-gradient(135deg, #5856eb 0%, #7c3aed 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
      }
      
      .btn-icon {
        font-size: 16px;
      }
    }
  }
}

/* 表格样式 - 更现代化的设计 */
.table-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #f1f5f9;
  
  :deep(.el-table) {
    border-radius: 16px;
    
    .el-table__header {
      th {
        background: #fafbfc !important;
        border-bottom: 1px solid #e5e7eb !important;
        font-weight: 600 !important;
        color: #374151 !important;
        font-size: 14px !important;
      }
    }
    
    .el-table__body {
      tr {
        transition: all 0.2s ease;
        
        &:hover {
          background-color: #f8fafc !important;
        }
      }
      
      td {
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 16px 12px !important;
      }
    }
  }
  
  .role-name {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .role-icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      
      .role-icon {
        font-size: 16px;
        color: white;
        
        &.default-icon {
          opacity: 0.8;
        }
      }
    }
    
    .role-name-text {
      font-weight: 500;
      color: #1f2937;
    }
  }
  
  .role-describe {
    color: #6b7280;
    line-height: 1.5;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .type-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    
    &.type-academic {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      color: #1d4ed8;
    }
    
    &.type-code {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
      color: #166534;
    }
    
    &.type-creative {
      background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
      color: #c2410c;
    }
    
    &.type-custom {
      background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
      color: #7c2d12;
    }
  }
  
  .time-info {
    .time-text {
      color: #6b7280;
      font-size: 13px;
    }
  }
  
  .table-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 12px;
      font-weight: 500;
      min-width: 55px;
      justify-content: center;
      white-space: nowrap;
      
      .btn-text {
        font-size: 11px;
      }
      
      &.edit-btn {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1d4ed8;
        border: 1px solid #93c5fd;
        
        &:hover {
          background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
          color: white;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
        }
      }
      
      &.delete-btn {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
        border: 1px solid #fca5a5;
        
        &:hover {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
          color: white;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }
      }
    }
  }
  
  .table-footer {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
  }
}

/* 对话框样式 - 更现代化的设计 */
:deep(.role-dialog) {
  .el-dialog {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
  }
  
  .el-dialog__header {
    padding: 0;
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog__footer {
    padding: 0;
  }
}

.dialog-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 24px;
  position: relative;
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .title-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      font-size: 20px;
    }
    
    .title-content {
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      p {
        margin: 4px 0 0;
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }
  
  .custom-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    
    &:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
}

.dialog-body {
  padding: 24px;
  
  .form-errors {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    margin-bottom: 24px;
    
    .error-icon {
      color: #ef4444;
      font-size: 18px;
      margin-top: 2px;
    }
    
    .error-list {
      flex: 1;
      
      .error-item {
        margin: 0;
        color: #dc2626;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
  
  .role-form {
    :deep(.el-form-item) {
      margin-bottom: 24px;
      
      .el-form-item__label {
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
      }
      
      .el-input__wrapper {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        &.is-focus {
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
      }
      
      .el-select {
        width: 100%;
        
        .el-input__wrapper {
          border-radius: 10px;
        }
      }
      
      .el-textarea__inner {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        font-family: inherit;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        &:focus {
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
      }
    }
    
    .form-row {
      display: flex;
      gap: 20px;
      
      .form-item {
        flex: 1;
        
        &.full-width {
          flex: none;
          width: 100%;
        }
      }
    }
    
    .cue-word-textarea {
      :deep(.el-textarea__inner) {
        min-height: 200px;
        resize: both;
        font-size: 14px;
        line-height: 1.6;
      }
    }
  }
}

.dialog-footer {
  padding: 20px 24px;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  :deep(.el-button) {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 500;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border: none;
      
      &:hover {
        background: linear-gradient(135deg, #5856eb 0%, #7c3aed 100%);
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .agent-role-manager {
    padding: 16px;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 16px;
    
    .search-wrapper {
      max-width: none;
    }
  }
  
  .role-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 5vh auto;
    }
  }
  
  .dialog-body {
    .role-form {
      .form-row {
        flex-direction: column;
        gap: 0;
      }
    }
  }
  
  .table-actions {
    flex-direction: column;
    gap: 4px;
    
    .action-btn {
      min-width: 50px;
      padding: 6px 8px;
      
      .btn-text {
        display: none;
      }
    }
  }
}
</style>